<template>
	<view class="pageContainer" :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>isTop</view>
				<view>Boolean</view>
				<view>false</view>
				<view>显示在顶部</view>
			</view>
			<view class="tr">
				<view>top</view>
				<view>String,Number</view>
				<view>无</view>
				<view>顶部向下偏移，isTop时有效</view>
			</view>
			<view class="tr">
				<view>bottom</view>
				<view>String,Number</view>
				<view>无</view>
				<view>底部向上偏移，isTop为否时有效</view>
			</view>
			<view class="tr">
				<view>position</view>
				<view>String</view>
				<view>fixed</view>
				<view>可选值static, relative, fixed, absolute, sticky，非绝对定位时注意可能与其他参数冲突。sticky时使用isTop及top或bottom控制上下浮动点</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色，影响标签栏</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色，影响标签栏</view>
			</view>
			<view class="tr">
				<view>baseColor</view>
				<view>String</view>
				<view>无</view>
				<view>默认文字色，影响标签，同时用于字体图标</view>
			</view>
			<view class="tr">
				<view>activeColor</view>
				<view>String</view>
				<view>无</view>
				<view>激活文字色，影响标签，同时用于字体图标</view>
			</view>
			<view class="tr">
				<view>borderWidth</view>
				<view>Number,String,Array</view>
				<view>无</view>
				<view>边框宽，影响标签栏，默认单位px。可填入带单位数值，可使用数组控制四个方向</view>
			</view>
			<view class="tr">
				<view>borderType</view>
				<view>String</view>
				<view>无</view>
				<view>边框类型，影响标签栏，同css样式</view>
			</view>
			<view class="tr">
				<view>borderColor</view>
				<view>String</view>
				<view>无</view>
				<view>边框颜色，影响标签栏。不设置则跟随主题色</view>
			</view>
			<view class="tr">
				<view>bgImage</view>
				<view>String</view>
				<view>无</view>
				<view>背景图地址，影响标签栏。优先于背景色</view>
			</view>
			<view class="tr">
				<view>zIndex</view>
				<view>Number</view>
				<view>101</view>
				<view>手动指定层级数</view>
			</view>
			<view class="tr">
				<view>appletFix</view>
				<view>Boolean</view>
				<view>false</view>
				<view>标题栏小程序适配，开启后标题栏右侧缩减100px，避免共享按钮遮挡。注意居中问题</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>50px</view>
				<view>标签栏高，须填入带单位数值</view>
			</view>
			<view class="tr">
				<view>textSpace</view>
				<view>String</view>
				<view>0.3em</view>
				<view>图标与文字间距</view>
			</view>
			<view class="tr">
				<view>statusFix</view>
				<view>Boolean</view>
				<view>false</view>
				<view>使用状态栏占位，isTop时有效</view>
			</view>
			<view class="tr">
				<view>noSeat</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用标签栏占位，浮动后不占用页面内容位置，可能影响页面上下滚动末尾位置</view>
			</view>
			<view class="tr">
				<view>iconSize</view>
				<view>String</view>
				<view>24px</view>
				<view>图标空位大小，无关图标最终尺寸，以该值为图标占位大小</view>
			</view>
			<view class="tr">
				<view>fontSize</view>
				<view>String</view>
				<view>12px</view>
				<view>标签字体默认大小</view>
			</view>
			<view class="tr">
				<view>bold</view>
				<view>Boolean</view>
				<view>false</view>
				<view>标签文字默认加粗</view>
			</view>
			<view class="tr">
				<view>dataList</view>
				<view>Array (Object)</view>
				<view>无</view>
				<view>标签列表，详细见下</view>
			</view>
			<view class="tr">
				<view>signList</view>
				<view>Array (Object)</view>
				<view>无</view>
				<view>标志列表，与dataList位置对应，详细见下</view>
			</view>
			<view class="tr">
				<view>current</view>
				<view>String,Number</view>
				<view>0</view>
				<view>当前激活标签，传入数字类型表示列表下标；传入字符类型表示标签ID，须在dataList设置每项id</view>
			</view>
			<view class="tr">
				<view>maxItem</view>
				<view>String,Number</view>
				<view>5</view>
				<view>标签最大数量，超出部分丢弃</view>
			</view>
			<view class="tr">
				<view>maxNum</view>
				<view>String,Number</view>
				<view>999</view>
				<view>标志最大值，超出则显示“最大值+”</view>
			</view>
			<view class="tr">
				<view>@click</view>
				<view>事件</view>
				<view></view>
				<view>标签点击事件，标签无pagePath时触发。提交item标签数据对象、index标签下标</view>
			</view>
			<view class="tr">
				<view>setCurrent</view>
				<view>function</view>
				<view></view>
				<view>使用refs调用，设置激活标签。传入数字类型表示列表下标；传入字符类型表示标签ID，须在dataList设置每项id</view>
			</view>
			<view class="tr">
				<view class="body">
					<view>setSign</view>
					<view>function</view>
					<view></view>
					<view>使用refs调用，设置标签标志。传入一个选项对象</view>
				</view>
				<view class="appendix">
					基础格式：{id:"", index:"", icon:"", value:""}
					<view>id，按照标签ID查找标签，优先。如果找不到则进一步判断index</view>
					<view>index，标签所在数组下标</view>
					<view>icon，字体图标名，自动转换为字体图标模式。优先</view>
					<view>value，如果为布尔变量true则转换为圆点模式；如果无有效值则清除标志；其他字符为显示值</view>
					除去以上属性及mode，选项对象的其余属性将会作为标志组件的传入参数，参考标志对象参数
				</view>
			</view>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="标签对象参数 dataList" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>id</view>
						<view>String</view>
						<view>标签ID，使用id设置标签激活时须赋值</view>
					</view>
					<view class="tr">
						<view>icon</view>
						<view>String</view>
						<view>标签图标以字体图标显示的图标名。图片优先</view>
					</view>
					<view class="tr">
						<view>class</view>
						<view>String</view>
						<view>图标外层的样式名</view>
					</view>
					<view class="tr">
						<view>style</view>
						<view>String</view>
						<view>图标外层的样式代码</view>
					</view>
					<view class="tr">
						<view>bold</view>
						<view>Boolean</view>
						<view>文字加粗</view>
					</view>
					<view class="tr">
						<view>text</view>
						<view>String</view>
						<view>显示文字</view>
					</view>
					<view class="tr">
						<view>fontSize</view>
						<view>String</view>
						<view>文字大小</view>
					</view>
					<view class="tr">
						<view>iconSize</view>
						<view>String</view>
						<view>图标最终尺寸。与标签栏图标空位有区别，可使图标超出标签栏范围显示</view>
					</view>
					<view class="tr">
						<view>current</view>
						<view>Boolean</view>
						<view>当前标签激活，仅在标签列表改变时判断一次</view>
					</view>
					<view class="tr">
						<view>pagePath</view>
						<view>String</view>
						<view>跳转页面地址</view>
					</view>
					<view class="tr">
						<view>baseImagePath</view>
						<view>String</view>
						<view>未激活时图标图片地址。图片图标优先显示</view>
					</view>
					<view class="tr">
						<view>activeImagePath</view>
						<view>String</view>
						<view>激活时图标图片地址。图片图标优先显示</view>
					</view>
					<view class="tr">
						<view>baseColor</view>
						<view>String</view>
						<view>未激活时文字颜色，包括字体图标。须为有效颜色值，不设置则继承主题type配置</view>
					</view>
					<view class="tr">
						<view>activeColor</view>
						<view>String</view>
						<view>激活时文字颜色，包括字体图标。须为有效颜色值，不设置则继承主题type配置</view>
					</view>
					<view class="tr">
						<view>baseIconColor</view>
						<view>String</view>
						<view>未激活时字体图标颜色，优先于baseColor</view>
					</view>
					<view class="tr">
						<view>activeIconColor</view>
						<view>String</view>
						<view>激活时字体图标颜色，优先于baseColor</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="标志对象参数 signList，与组件vi-sign参数相同" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>mode</view>
						<view>String</view>
						<view>标志类型，可选value显示文字、icon显示标签、dot显示圆点</view>
					</view>
					<view class="tr">
						<view>value</view>
						<view>String</view>
						<view>标志内容，根据mode类型有不同含义，value类型为实际显示内容，icon类型为图标名</view>
					</view>
					<view class="tr extra">
						<view class="body">
							<view>point</view>
							<view>String</view>
							<view>标志位置</view>
						</view>
						<view class="appendix">
							<view>leftTop，左上角</view>
							<view>rightTop，右上角(默认)</view>
							<view>leftBottom，左下角</view>
							<view>rightBottom，右下角</view>
							<view>{left:0, right:0, top:0, bottom:0}，手动设置偏移</view>
						</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>主题色，默认：primary</view>
					</view>
					<view class="tr">
						<view>color</view>
						<view>String</view>
						<view>自定义主题色</view>
					</view>
					<view class="tr">
						<view>textColor</view>
						<view>String</view>
						<view>文字固定色</view>
					</view>
					<view class="tr">
						<view>borderColor</view>
						<view>String</view>
						<view>固定边框色</view>
					</view>
					<view class="tr">
						<view>borderType</view>
						<view>String</view>
						<view>边框类型，同css样式</view>
					</view>
					<view class="tr">
						<view>borderBox</view>
						<view>Boolean</view>
						<view>盒模型类型为borderBox，默认true</view>
					</view>
					<view class="tr">
						<view>backgroundColor</view>
						<view>String</view>
						<view>固定背景色</view>
					</view>
					<view class="tr">
						<view>radius</view>
						<view>String</view>
						<view>圆角，可选circle、square，或带单位数值</view>
					</view>
					<view class="tr">
						<view>plain</view>
						<view>String</view>
						<view>是否镂空，默认：false</view>
					</view>
					<view class="tr">
						<view>shadow</view>
						<view>String</view>
						<view>阴影，格式为css的box-shadow格式</view>
					</view>
					<view class="tr">
						<view>width</view>
						<view>String</view>
						<view>自定义宽，可填入带单位数值</view>
					</view>
					<view class="tr">
						<view>height</view>
						<view>String</view>
						<view>自定义高，可填入带单位数值</view>
					</view>
					<view class="tr">
						<view>borderWidth</view>
						<view>Number, String</view>
						<view>边框宽，默认单位px。可填入带单位数值。默认：0</view>
					</view>
					<view class="tr">
						<view>fontSize</view>
						<view>String</view>
						<view>自定义文字尺寸，需带单位</view>
					</view>
					<view class="tr">
						<view>bold</view>
						<view>Boolean</view>
						<view>加粗，默认：false</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-tabbar :dataList="标签列表">&lt;/vi-tabbar>`}}
			</view>
			<view class="py-sm">
				<text>默认：</text>
				<view class="fbox">
					<vi-button width="6em" @click="setSign">设置标志</vi-button>
					<vi-button width="8em" @click="setSign1">设置图标标志</vi-button>
				</view>
			</view>
			<view class="py-sm">
				<text>不浮动：</text>
				<vi-tabbar position="static" :dataList="dataList1" @click="logEvent"></vi-tabbar>
			</view>
			<view class="h-e2"></view>
		</view>
		
		<vi-tabbar ref="tabbar" :dataList="dataList" @click="changeTab"></vi-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:0,
				dataList:[
					{
						id:"button1",
						icon:"icon-clock",
						class:"",
						style:"",
						bold:false,
						text:"按钮",
						fontSize:"",
						iconSize:"",
						current:false,
						pagePath:"",
						baseImagePath:"",
						activeImagePath:"",
						baseColor:"#e2e2e2",
						activeColor:"#fff",
					},
					{
						id:"button2",
						icon:"icon-camera",
						class:"bgColor-default p-md r50",
						style:"box-shadow:0 0 5px #999;",
						bold:false,
						text:"",
						fontSize:"",
						iconSize:"3em",
						current:false,
						pagePath:"",
						baseImagePath:"",
						activeImagePath:"",
						baseColor:"",
						activeColor:"",
						baseIconColor:"#666",
						activeIconColor:"#1E9FFF",
					}
				],
				dataList1:[
					{icon:"icon-clock",text:"按钮1"},
					{icon:"icon-clock",text:"按钮2"},
				]
			}
		},
		methods: {
			changeTab(data){
				let {item, index} = data;
				console.log("点击了"+index+"标签");
				this.$refs.tabbar.setCurrent(index);
			},
			setSign(){
				this.value++;
				this.$refs.tabbar.setSign({
					index:0,
					value:this.value
				});
			},
			setSign1(){
				this.$refs.tabbar.setSign({
					index:1,
					icon:"icon-reset"
				});
			},
			logEvent(e){
				console.log("点击了按钮",e);
			}
		}
	}
</script>

<style lang="scss" scoped>
.pageContainer{
	
}
</style>
